import { forwardRef, memo, useMemo } from 'react'
import './index.scss'
import Single from "../../../../assets/print/single-nocolor.png";
import SingleColor from "../../../../assets/print/single-color.png";
import ShortColor from "../../../../assets/print/short-color.png";
import LognColor from "../../../../assets/print/long-color.png";
import ShortNoColor from "../../../../assets/print/short-nocolor.png";
import LongNoColor from "../../../../assets/print/long-nocolor.png";
import BookletColor from "../../../../assets/print/booklet-color.png";
import BookletNoColor from "../../../../assets/print/booklet-nocolor.png";
import CopyDbColor from "../../../../assets/copy/copy-db-color.png";
import CopyOneColor from "../../../../assets/copy/copy-one-color.png";
import CopyDbNoColor from "../../../../assets/copy/copy-db-noColor.png";
import CopyOneNoColor from "../../../../assets/copy/copy-one-noColor.png";
import codePng from '../../../../assets/system/code@2x.png'
const PreviewBox = forwardRef((props: any, ref: any) => {
    const { pos, mode, params } = props
    const { layer, haveBarcode, colorType } = params
    const imgUrl = useMemo(() => {
        if (mode === 1) {
            if (colorType === 1 && layer === 1) {
                // 单面黑白
                return Single;
            } else if (colorType === 2 && layer === 1) {
                // 单面彩色
                return SingleColor;
            } else if (colorType === 1 && layer === 3) {
                // 短边黑白
                return ShortNoColor;
            } else if (colorType === 2 && layer === 3) {
                // 短边彩色
                return ShortColor;
            } else if (colorType === 1 && layer === 2) {
                // 长边黑白
                return LongNoColor;
            } else if (colorType === 2 && layer === 2) {
                // 长边彩色
                return LognColor;
            } else if (colorType === 1 && layer === 4) {
                // 小册子黑白
                return BookletNoColor;
            } else if (colorType === 2 && layer === 4) {
                // 小册子彩色
                return BookletColor;
            } else {
                return Single;
            }
        } else if (mode === 8) {
            if (layer === 1) {
                return colorType === 1 ? CopyDbNoColor : CopyDbColor;
            }
            return colorType === 1 ? CopyOneNoColor : CopyOneColor;
        } else {
            if (colorType === 1 && (layer === 1 || layer === 4)) {
                return CopyOneNoColor;
            } else if (colorType === 1 && (layer === 2 || layer === 8)) {
                return CopyDbNoColor;
            } else if (colorType === 2 && (layer === 1 || layer === 4)) {
                return CopyOneColor;
            } else if (colorType === 2 && (layer === 2 || layer === 8)) {
                return CopyDbColor;
            }
            return CopyOneColor;
        }
    }, [mode, colorType, layer])
    const handlePosition = useMemo(() => {
        if (layer === 1) {
            if (colorType == 1) {
                if (pos === "1") return { left: '52px', top: '8px' };
                if (pos === "32") return { left: '98px', top: '8px' };
                if (pos === "4") return { right: '52px', top: '8px' };
                if (pos === "2") return { left: '52px', bottom: '19px' };
                if (pos === "16") return { left: '98px', bottom: '19px' };
                if (pos === "8") return { right: '52px', bottom: '19px' };
            } else {
                if (pos === "1") return { left: '52px', top: '12px' };
                if (pos === "32") return { left: '98px', top: '12px' };
                if (pos === "4") return { right: '52px', top: '12px' };
                if (pos === "2") return { left: '52px', bottom: '15px' };
                if (pos === "16") return { left: '98px', bottom: '15px' };
                if (pos === "8") return { right: '52px', bottom: '15px' };
            }
        } else if (layer === 2) {
            if (colorType == 1) {
                if (pos === "1") return { left: '46px', top: '8px' };
                if (pos === "32") return { left: '98px', top: '8px' };
                if (pos === "4") return { right: '58px', top: '8px' };
                if (pos === "2") return { left: '46px', bottom: '28px' };
                if (pos === "16") return { left: '98px', bottom: '28px' };
                if (pos === "8") return { right: '58px', bottom: '28px' };
            } else {
                if (pos === "1") return { left: '53px', top: '9px' };
                if (pos === "32") return { left: '98px', top: '9px' };
                if (pos === "4") return { right: '53px', top: '9px' };
                if (pos === "2") return { left: '53px', bottom: '28px' };
                if (pos === "16") return { left: '98px', bottom: '28px' };
                if (pos === "8") return { right: '53px', bottom: '28px' };
            }
        } else if (layer === 3) {
            if (colorType == 1) {
                if (pos === "1") return { left: '46px', top: '12px' };
                if (pos === "32") return { left: '98px', top: '12px' };
                if (pos === "4") return { right: '58px', top: '12px' };
                if (pos === "2") return { left: '46px', bottom: '19px' };
                if (pos === "16") return { left: '98px', bottom: '19px' };
                if (pos === "8") return { right: '58px', bottom: '19px' };
            } else {
                if (pos === "1") return { left: '53px', top: '12px' };
                if (pos === "32") return { left: '98px', top: '12px' };
                if (pos === "4") return { right: '53px', top: '12px' };
                if (pos === "2") return { left: '53px', bottom: '19px' };
                if (pos === "16") return { left: '98px', bottom: '19px' };
                if (pos === "8") return { right: '53px', bottom: '19px' };
            }
        } else if (layer === 4) {
            if (colorType == 1) {
                if (pos === "1") return { left: '49px', top: '23px', transform: 'rotate(-10deg)' };
                if (pos === "32") return { left: '86px', top: '17px', transform: 'rotate(-10deg)' };
                if (pos === "4") return { right: '83px', top: '12px', transform: 'rotate(-10deg)' };
                if (pos === "2") return { left: '52px', bottom: '36px', transform: 'rotate(-10deg)' };
                if (pos === "16") return { left: '86px', bottom: '42px', transform: 'rotate(-12deg)' };
                if (pos === "8") return { right: '80px', bottom: '50px', transform: 'rotate(-11deg)' };
            } else {
                if (pos === "1") return { left: '49px', top: '23px', transform: 'rotate(-10deg)' };
                if (pos === "32") return { left: '86px', top: '17px', transform: 'rotate(-10deg)' };
                if (pos === "4") return { right: '83px', top: '12px', transform: 'rotate(-10deg)' };
                if (pos === "2") return { left: '52px', bottom: '36px', transform: 'rotate(-10deg)' };
                if (pos === "16") return { left: '86px', bottom: '42px', transform: 'rotate(-12deg)' };
                if (pos === "8") return { right: '80px', bottom: '50px', transform: 'rotate(-11deg)' };
            }
        }
    }, [layer, colorType, pos,haveBarcode])
    return (
        <>
            <div className="preview-container">
                <h3 className="mb-10">设置预览</h3>
                <div className="preview-detail">
                    <div className="view-box">
                        <div className="imgBox">
                            <img src={imgUrl} alt="" className="w100 page-type" draggable={false} />
                            {
                                haveBarcode == 1 ? <img style={{ ...handlePosition }} draggable={false} src={codePng}
                                    className="code-rule" /> : null
                            }
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
})
export default memo(PreviewBox)